<div>
    <p style="display: flex;font-size: 17px;justify-content: left;align-items: center;flex-wrap: wrap;height:60px;background-color: #F6F6F6FF">
        <img src="../module/index/image/title.png" style="margin-left:20px;width: 25px">已连接设备列表
        <!-- <i class="el-icon-refresh-right" style="cursor: pointer;font-weight: 600!important;"
            @click="getOnlineDevice">
         </i>-->

        <!-- <span style="margin-left:5px;cursor: pointer;" @click.stop="expandDeviceFun">{{ expandDevice ? '收缩' : '展开'}}</span>-->
        <!--     <span @click.stop="authorizedFun" target="_blank" style="margin-left: 2px;color: #9a2c25;cursor: pointer;">
                 【设备{{authorizeStatus? '已' : '未'}}授权】版本【V2.9.0】
             </span>-->

        <span @click.stop="authorizedFun" target="_blank" :style="{'color': authorizeStatus ? '#6b3dff' : '#d13026'}" style="margin-left: 0px;cursor: pointer;">【服务端{{authorizeStatus? '已' : '未'}}授权】</span>
        <span @click.stop="checkVersion" style="cursor: pointer;margin-right: 5px;" title="点击检查更新">{{"【"+ versionInfo +"】"+newVersionNotice }}</span>
        <el-button  plain v-if="expandDevice" icon="el-icon-arrow-up" style="cursor: pointer; height: 25px;width: 70px;color:#CC5D5C;font-size: 14px; padding: 0px 13px" @click.stop="expandDeviceFun">收缩</el-button>
        <el-button  plain v-if ="!expandDevice" icon="el-icon-arrow-down" style="cursor: pointer; height: 25px;width: 70px;color:#CC5D5C;font-size: 14px;padding: 0px 13px" @click.stop="expandDeviceFun">展开</el-button>
        <el-button  plain class="el-icon-refresh-right" style="cursor: pointer; height: 25px;width: 70px;color:#CC5D5C;font-size: 14px;padding: 0px 0px !important " @click="getOnlineDevice()">刷新</el-button>
        <span style="width: 300px">
            <span style="margin-left: 10px;color: #419EFDFF;">
               {{ deviceInfo.deviceUuid ? (deviceInfo.aliasName ? '【'+deviceInfo.aliasName+'】' : '') + deviceInfo.deviceUuid + '已连接': ''}}
            </span>
        </span>
        <span class="flex-1" style="text-align: right;">
            <a href="https://gitee.com/zjh336/hz_autojs_toolbox_web/releases" target="_blank"
               style="margin-right: 5px;color: #909399;text-decoration: none;font-size: 14px">Web端下载</a>
            <a href="https://gitee.com/zjh336/hz_autojs_toolbox/releases" target="_blank"
               style="margin-right: 5px;color: #909399;text-decoration: none;font-size: 14px">APP端下载</a>
            <a href="https://sp2.zjh336.cn?code=YT0yJmI9NQ%3D%3D" target="_blank" style="margin-right: 5px;color: #909399;text-decoration: none;font-size: 14px">打包插件下载</a>
            <a href="https://space.bilibili.com/69729485/channel/series" target="_blank"
               style="margin-right: 5px;color: #909399;text-decoration: none;font-size: 14px">视频教程</a>
            <a href="https://gitee.com/zjh336/hz_autojs_toolbox_web/wikis/pages" target="_blank"
               style="margin-right: 5px;color: #909399;text-decoration: none;font-size: 14px">Web端文档【必读】</a>
            <a href="https://www.zjh336.cn/?id=2126" target="_blank" style="margin-right: 5px;color: #909399;text-decoration: none;font-size: 14px">学习指南【必读】</a>
             <a href="/docs/v8/app.html" target="_blank"
                style="margin-right: 5px;color: #909399;text-decoration: none;font-size: 14px">AutoJsPro文档</a>
            <a href="https://jq.qq.com/?_wv=1027&k=QGefcWIC" target="_blank" style="color: #909399;text-decoration: none;font-size: 14px">QQ群：806074622</a>
        </span>
        <span>
           <i class="el-icon-setting" @click.stop="showSystemSettingDialog" style="margin: 0 10px;font-size: 20px;"></i>
        </span>
    </p>
    <el-row v-show="expandDevice">
        <div class="width100 d-flex a-center">
            <el-table :data="deviceList" v-loading="deviceLoading" border ref="deviceTable"
                      highlight-current-row @current-change="selectRowChange" style="width: 100%" :header-cell-style="{'text-align':'center',background:'#F0F2F4',color:'#666E92'}">
                <el-table-column prop="deviceUuid" align="left" label="设备UUID">
                    <template slot-scope="{ row, $index}">
                        {{ (row.aliasName ? "【"+row.aliasName+"】": "")  + row.deviceUuid }}
                    </template>
                </el-table-column>
                </el-table-column>
                <el-table-column prop="connectTime" label="建立连接时间" align="left">
                </el-table-column>
                <el-table-column prop="lastHeartTime" label="最后一次心跳时间" align="left">
                </el-table-column>
                <el-table-column prop="screenHeight" label="屏幕高度" align="left">
                </el-table-column>
                <el-table-column prop="screenWidth" label="屏幕宽度" align="left">
                </el-table-column>
            </el-table>
        </div>
    </el-row>
    <el-row v-show="expandDevice">
        <div class="width100 d-flex a-center flex-wrap" style="margin-top: 10px; ">
            <el-form-item label="标准宽度:" prop="x1"  label-width="100px" class="flex-1" >
                <el-input-number v-model="deviceInfo.standardWidth" controls-position="right" @change="syncWidthHeightToApp" :min="0"  style="width: 100px"></el-input-number>
            </el-form-item>
            <el-form-item label="标准高度:" prop="y1"  label-width="100px" class="flex-1">
                <el-input-number v-model="deviceInfo.standardHeight" controls-position="right" @change="syncWidthHeightToApp" :min="0" style="width: 100px"></el-input-number>
            </el-form-item>
            <el-form-item label="x偏移系数:" prop="x1" label-width="100px"  class="flex-1">
                <el-input-number v-model="deviceInfo.offsetX" controls-position="right" @change="syncWidthHeightToApp" :min="0" style="width: 100px"></el-input-number>
            </el-form-item>
            <el-form-item label="y偏移系数:" prop="y1"  label-width="100px" class="flex-1">
                <el-input-number v-model="deviceInfo.offsetY" controls-position="right" @change="syncWidthHeightToApp" :min="0" style="width: 100px"></el-input-number>
            </el-form-item>
            <el-form-item label="调试延时:" label-width="100px" class="flex-1">
                <el-input-number  v-model="deviceInfo.debugSleep" controls-position="right" @change="syncWidthHeightToApp" :min="0" style="width: 100px"></el-input-number>
            </el-form-item>
            <el-form-item label="调试模式:" label-width="100px" class="flex-1">
                <div class="d-flex j-start a-center" style="height: 40px;">
                    <el-switch  v-model="deviceInfo.debugModel" @change="syncWidthHeightToApp" style="margin-right: 5px;"/>
                </div>
            </el-form-item>
            <div class="d-flex j-start a-center flex-1"  style="margin-bottom:15px;">
                <el-button @click.stop="syncWidthHeightToApp">
                    同步到APP
                </el-button>
                <el-button @click.stop="timeSyncOtherPropertyFun">
                    从APP同步
                </el-button>
                <el-button @click.stop="refreshCaptureScreen">
                    刷新截图权限
                </el-button>
                <span v-popover:popover10 class="link-black" style="display: flex; font-size: 21px; margin-left: 10px; cursor: pointer">
                  <i class="el-icon-question" />
                </span>
                <el-popover ref="popover10" placement="top-start" width="600" trigger="hover">
                    <div>
                        <b>服务端授权:</b>
                        <span>目前只影响web端打包功能,未授权不支持打包。</span>
                    </div>
                    <div style="margin-top: 10px;">
                        <b>已连接设备列表:</b>
                        <span>加载当前连接服务端的app设备,可通过公共文件-deviceAliasName.json设置别名。(最后一次连接设备,当APP建立连接后,web页面自动连接)</span>
                    </div>
                    <div style="margin-top: 10px;">
                        <b>标准宽度:</b>
                        <span>默认读取设备宽度。(基于游戏脚本脚手架,编写多分辨率图色脚本时需要用到该参数)</span>
                    </div>
                    <div style="margin-top: 10px;">
                        <b>标准高度:</b>
                        <span>默认读取设备高度。(基于游戏脚本脚手架,编写多分辨率图色脚本时需要用到该参数)</span>
                    </div>
                    <div style="margin-top: 10px;">
                        <b>x偏移系数:</b>
                        <span>默认0,当前设备不是标准分辨率时,横向坐标轴进行双向偏移的系数值。(基于游戏脚本脚手架,编写多分辨率图色脚本时需要用到该参数)</span>
                    </div>
                    <div style="margin-top: 10px;">
                        <b>y偏移系数:</b>
                        <span>默认0,当前设备不是标准分辨率时,纵向坐标轴进行双向偏移的系数值。(基于游戏脚本脚手架,编写多分辨率图色脚本时需要用到该参数)</span>
                    </div>
                    <div style="margin-top: 10px;">
                        <b>调试延时:</b>
                        <span>开启调试模式后,调用封装图色api进行测试时,屏幕绘制匹配框延时一定时间后消失。(工具箱运行图像处理生成代码、游戏脚本脚手架代码)</span>
                    </div>
                    <div style="margin-top: 10px;">
                        <b>调试模式:</b>
                        <span>开启调试模式后,调用封装图色api进行测试时,屏幕绘制匹配框,增加延时消失,产生更多输出日志,远程执行代码显示。(增强调试代码功能)</span>
                    </div>
                    <div style="margin-top: 10px;">
                        <b>同步到APP:</b>
                        <span>左侧常用参数同步到APP端</span>
                    </div>
                    <div style="margin-top: 10px;">
                        <b>从APP同步:</b>
                        <span>从APP端将这些参数同步到web显示</span>
                    </div>
                    <div style="margin-top: 10px;">
                        <b>刷新截图权限:</b>
                        <span>进行远程截图操作时,意外导致截图权限异常,可使用此功能重新请求截图权限。(设备预览、图像处理、布局分析)</span>
                    </div>
                </el-popover>
            </div>
        </div>
    </el-row>

    <el-dialog
            title="系统设置"
            :visible.sync="systemSettingDialog"
            width="42%"
            center
            >
        <div style="height: 300px;padding-top: 15px;">
            <el-row class="d-flex">
                   <el-form-item label="设备状态通知:" label-width="130px"  class="flex-1">
                       <div class="d-flex a-center j-start" style="height: 40px;">
                        <el-switch  v-model="systemConfig.deviceStatusNotice" @change="systemConfigChange" style="margin-right: 5px;"/>
                        <span v-popover:popover1 class="link-black" style="display: flex; font-size: 21px; margin-left: 10px; cursor: pointer">
                          <i class="el-icon-question" />
                        </span>
                       </div>
                   </el-form-item>
                <el-form-item label="最后一次连接设备:" label-width="130px"  class="flex-1">
                    <div style="white-space: nowrap;">
                        {{systemConfig.lastSelectDeviceUuid}}
                    </div>
                </el-form-item>
                    <el-popover ref="popover1" placement="top-start" width="260" trigger="hover">
                        <div>
                            是否显示APP的设备上线和离线通知,开启后,APP连接服务端和断开服务端均会在右下角显示通知。
                        </div>
                    </el-popover>
            </el-row>
            <el-row class="d-flex">
                <el-form-item label="公共文件允许编辑:" label-width="130px"  class="flex-1">
                    <div class="d-flex a-center j-start" style="height: 40px;">
                        <el-switch  v-model="systemConfig.allowOperateFile" @change="systemConfigChange" style="margin-right: 5px;"/>
                        <span v-popover:popover2 class="link-black" style="display: flex; font-size: 21px; margin-left: 10px; cursor: pointer">
                          <i class="el-icon-question" />
                        </span>
                        <el-popover ref="popover2" placement="top-start" width="260" trigger="hover">
                            <div>
                                开启编辑后,可以修改删除公共文件中全部文件
                            </div>
                        </el-popover>
                    </div>
                </el-form-item>
                <el-form-item label="自动检测版本更新:" label-width="130px"  class="flex-1">
                    <div class="d-flex a-center j-start" style="height: 40px;">
                        <el-switch  v-model="systemConfig.autoCheckVersionUpdate" @change="systemConfigChange" style="margin-right: 5px;"/>
                        <span v-popover:popover3 class="link-black" style="display: flex; font-size: 21px; margin-left: 10px; cursor: pointer">
                          <i class="el-icon-question" />
                        </span>
                        <el-popover ref="popover3" placement="top-start" width="260" trigger="hover">
                            <div>
                                开启后,exe方式部署的,将会自动检测版本更新
                            </div>
                        </el-popover>
                    </div>
                </el-form-item>
            </el-row>
            <el-row class="d-flex">
                <el-form-item label="开启公告显示:" label-width="130px"  class="flex-1">
                    <div class="d-flex a-center j-start" style="height: 40px;">
                        <el-switch  v-model="systemConfig.openNoticeMessage" @change="systemConfigChange" style="margin-right: 5px;"/>
                        <span v-popover:popover4 class="link-black" style="display: flex; font-size: 21px; margin-left: 10px; cursor: pointer">
                          <i class="el-icon-question" />
                        </span>
                        <el-popover ref="popover4" placement="top-start" width="260" trigger="hover">
                            <div>
                                开启后,自动显示公告信息
                            </div>
                        </el-popover>
                    </div>
                </el-form-item>
                <el-form-item label="自动刷新截图权限:" label-width="130px"  class="flex-1">
                    <div class="d-flex a-center j-start" style="height: 40px;">
                        <el-switch  v-model="systemConfig.autoRefreshScreenCapture" @change="systemConfigChange" style="margin-right: 5px;"/>
                        <span v-popover:popover5 class="link-black" style="display: flex; font-size: 21px; margin-left: 10px; cursor: pointer">
                          <i class="el-icon-question" />
                        </span>
                        <el-popover ref="popover5" placement="top-start" width="260" trigger="hover">
                            <div>
                                开启后,进行截图相关操作时,自动刷新截图权限
                            </div>
                        </el-popover>
                    </div>
                </el-form-item>
            </el-row>
            <el-row class="d-flex">
                <el-form-item label="图片名称默认值:" label-width="130px"  class="flex-1">
                    <div class="d-flex a-center j-start" style="height: 40px;">
                        <el-input  v-model="systemConfig.defaultScreenImageName" @change="systemConfigChange" placeholder="请设置图片名称的默认值" style="margin-right: 5px;"/>
                        <span v-popover:popover6 class="link-black" style="display: flex; font-size: 21px; margin-left: 10px; cursor: pointer">
                          <i class="el-icon-question" />
                        </span>
                        <el-popover ref="popover6" placement="top-start" width="400" trigger="hover">
                            <div>
                                图像处理,图片名称默认值<br/>
                                为空时,则取值为【system/imageHandler/allScreen.png】
                            </div>
                        </el-popover>
                    </div>
                </el-form-item>
                <el-form-item label="全屏截图自动重置:" label-width="130px"  class="flex-1">
                    <div class="d-flex a-center j-start" style="height: 40px;">
                        <el-switch  v-model="systemConfig.allScreenCaptureAutoRename" @change="systemConfigChange" style="margin-right: 5px;"/>
                        <span v-popover:popover7 class="link-black" style="display: flex; font-size: 21px; margin-left: 10px; cursor: pointer">
                          <i class="el-icon-question" />
                        </span>
                        <el-popover ref="popover7" placement="top-start" width="260" trigger="hover">
                            <div>
                                开启后,执行全屏截图操作时,会自动重置图片名称为默认值
                            </div>
                        </el-popover>
                    </div>
                </el-form-item>
            </el-row>
            <el-row class="d-flex">
                <el-form-item label="容器高度缩放比例:" label-width="130px"  class="flex-1">
                    <div class="d-flex a-center j-start" style="height: 40px;">
                        <el-slider style="flex:1;" v-model="systemConfig.zoomSize" :min="30" :max="100" show-input></el-slider>
                        <span v-popover:popover8 class="link-black" style="display: flex; font-size: 21px; margin-left: 10px; cursor: pointer">
                          <i class="el-icon-question" />
                        </span>
                        <el-popover ref="popover8" placement="top-start" width="260" trigger="hover">
                            <div>
                                【图像处理】、【布局分析】、【预览设备】模块容器滚动条高度缩放比例
                            </div>
                        </el-popover>
                    </div>
                </el-form-item>
            </el-row>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="systemSettingDialog = false">关闭</el-button>
        </span>
    </el-dialog>
</div>